<template>
	<view>
		<view class="u-flex u-row-between u-text-center u-p-l-50 u-p-r-50 u-p-t-40 u-p-b-20">
			<view @click="chose(0)">
				<u-icon name="search" size="80"></u-icon>
				<view>识别</view>
			</view>
			<view @click="chose(1)">
				<u-icon name="grid" size="80"></u-icon>
				<view>控制</view>
			</view>
			<view @click="show=!show">
				<u-icon name="list-dot" size="80"></u-icon>
				<view>历史记录</view>
			</view>
		</view>
		<view class="u-m-10 u-p-20 u-flex u-row-between" style="border-radius:20rpx;border:1rpx solid #000;">
			<view>
				<view v-if="checked"><u-icon name="wifi" size="60"></u-icon> <u-switch v-model="checked" size="35" active-color="green"></u-switch></view>
				<view v-else><u-icon name="wifi-off" size="60"></u-icon> <u-switch v-model="checked" size="35" active-color="green"></u-switch></view>
			</view>
			<view>
				<view v-if="checked">连接状态：<u-icon name="checkmark" size="40"></u-icon></view>
				<view v-else>连接状态：<u-icon name="close" size="40"></u-icon></view>
			</view>
		</view>
		<view v-if="current==0" class="u-p-20" style="margin-top:40rpx;">
			<view class="u-flex u-row-between">
				<view><image src="../../../static/2.jpg" mode="widthFix" style="width:330rpx"></image></view>
				<view>
					<view class="u-p-b-10 u-text-center" style="font-size:22rpx;">纬度：{{latitude}}，经度{{longitude}}</view>
					<map style="width:360rpx; height: 290rpx;" scale="14" :latitude="latitude" :longitude="longitude"></map>
				</view>
			</view>
			<view class="u-m-t-20 u-m-b-20">
				识别为：潜叶虫类别 <u-icon name="error-circle" size="30" color="green"></u-icon>
			</view>
			<view class="u-p-20" style="border-radius: 20rpx;border:1rpx solid green;margin-top:40rpx;">
				<view style="line-height:1.2rem;letter-spacing:0.2rem;">
					1.消天虫卵:将受害植株的叶子和茎条上的虫卵用手摘除或用刀刮掉，然后将其焚烧。
				</view>
				<view style="line-height:1.2rem;letter-spacing:0.2rem;padding-top:30rpx;">
					2.做好防治工作:在种植蔬菜的过程中，要注意做好病虫害的预防工作，加强通风、控制温度和湿度等环境因素，以减少病虫害的发生。
				</view>
			</view>
			<view class="u-text-center" style="margin-top:50rpx;">
				<view><u-icon name="camera-fill" size="80" color="green"></u-icon><u-icon name="plus" size="30" color="green" top="-16"></u-icon></view>
			</view>
		</view>
		<view v-else style="margin-top:60rpx;">
			<view class="u-text-center"><u-icon name="arrow-upward" size="80" ></u-icon></view>
			<view class="u-flex u-row-between" style="padding:80rpx;margin-top:40rpx;">
				<view><u-icon name="arrow-leftward" size="80" ></u-icon></view>
				<view><u-icon name="arrow-rightward" size="80" ></u-icon></view>
			</view>
			<view class="u-text-center" style="margin-top:40rpx;"><u-icon name="arrow-downward" size="80" ></u-icon></view>
			<view class="u-flex u-row-between" style="padding:100rpx;margin-top:40rpx;">
				<view><button style="background: #22b573;border-radius: 20rpx;color:#fff;width:150rpx">开始</button></view>
				<view><button style="background: #fbb03b;border-radius: 20rpx;color:#fff;width:150rpx">中止</button></view>
				<view><button style="background: #ed1c24;border-radius: 20rpx;color:#fff;width:150rpx">停止</button></view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" height="70%" closeable="true">
			<view class="u-p-20" style="margin-top:40rpx;">
				<u-table>
						<u-tr>
							<u-th>ID</u-th>
							<u-th>操作</u-th>
							<u-th>时间</u-th>
						</u-tr>
						<u-tr>
							<u-td>001</u-td>
							<u-td>关闭连接</u-td>
							<u-td>2024-05-11</u-td>
						</u-tr>
						<u-tr>
							<u-td>002</u-td>
							<u-td>打开链接</u-td>
							<u-td>2024-05-12</u-td>
						</u-tr>
					</u-table>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var vk = uni.vk;
	export default {
		data() {
			// 页面数据变量
			return {
				latitude: 23.297276,
				longitude: 113.486710,
				checked:true,
				current:0,
				show:false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
		
		},
		// 监听 - 页面每次【显示时】执行（如：前进和返回）（页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面）
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行（如：返回）
		onHide() {
		
		},
		// 监听 - 页面每次【卸载时】（一般用于取消页面上的监听器）
		onUnload(){
			
		},
		// 监听 - 页面下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		/**
		 * 监听 - 点击右上角转发时 文档 https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage
		 * 如果删除onShareAppMessage函数，则微信小程序右上角转发按钮会自动变灰
		 */
		onShareAppMessage(options) {
			
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options={}){
				console.log("init: ",options);
			},
			chose(e){
				this.current = e
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
		},
		// 监听器
		watch:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>
<style>  


</style>